<template>
  <div class="payment">
    <!-- 提交支付资料 -->
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-position="left"
      label-width="100px"
      class="demo-ruleForm"
    >
      <ul class="tip">
        <li>所有上传图片均要保证边框完整，图像清晰，光线均匀。</li>
        <li>所有上传证件，需属于法人本人！</li>
        <li>
          复制客服微信号：
          <span>Deke-666</span>上传资料
        </li>
      </ul>
      <el-form-item label="支付类型" size="small">
        <el-radio-group v-model="form.pay_type">
          <el-radio label="0">对公</el-radio>
          <el-radio label="1">对私</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="软件账号" size="small" prop="pay_accountno">
        <el-input size="medium" v-model="form.pay_accountno" placeholder="请输入软件注册的账号"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" size="small" prop="pay_phoneno">
        <el-input size="medium" v-model="form.pay_phoneno" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="联系邮箱" size="small" prop="pay_email">
        <el-input size="medium" v-model="form.pay_email" placeholder="请输入联系邮箱"></el-input>
      </el-form-item>
      <el-form-item class="adressSelect" label="开户行信息" size="small" prop="pay_info_add3">
        <el-cascader
          expand-trigger="hover"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
          placeholder="请选择地址"
          size="small"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="支行名称" size="small" prop="pay_info_bank">
        <el-input size="medium" v-model="form.pay_info_bank" placeholder="请输入支行名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="身份证正面" size="small" prop="pay_info_config.id_card" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'payment',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess1"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="id_card" :src="id_card" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证反面" size="small" prop="pay_info_config.id_card1" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'payment',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="id_card1" :src="id_card1" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="营业执照" size="small" prop="pay_info_config.license" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'payment',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess3"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="license" :src="license" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item
        :label="form.pay_type==0 ? '开户许可证':'银行卡'"
        size="small"
        prop="pay_info_config.pay"
        class="card"
      >
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'payment',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess4"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="pay" :src="pay" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="门头照" size="small" prop="pay_info_config.shop_head" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'payment',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess5"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="shop_head" :src="shop_head" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="收银台照" size="small" prop="pay_info_config.checkstand" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'payment',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess6"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="checkstand" :src="checkstand" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="店内场景照" size="small" prop="pay_info_config.shop" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'payment',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess7"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="shop" :src="shop" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item size="large">
        <el-button
          style="margin-left: 15%;padding: 8px 30px"
          type="primary"
          @click="onSubmit('form')"
        >确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
import { mapState } from "vuex"; //注册state
export default {
  inject: ["reload"],
  data() {
    return {
      // 数据
      form: {
        pay_type: "0",
        pay_accountno: "",
        pay_phoneno: "",
        pay_email: "",
        pay_info_add1: 0, // 省份
        pay_info_add2: 0, // 市
        pay_info_add3: 0, // 区
        pay_info_bank: "",
        pay_info_config: {
          id_card: "",
          id_card1: "",
          license: "",
          pay: "",
          shop_head: "",
          checkstand: "",
          shop: ""
        }
      },
      rules: {
        pay_accountno: [{ required: true, message: "请输入软件注册的账号" }],
        pay_phoneno: [{ required: true, message: "请输入联系电话" }],
        pay_email: [{ required: true, message: "请输入联系邮箱" }],
        pay_info_add3: [{ required: true, message: "请输入开户行信息" }],
        pay_info_bank: [{ required: true, message: "请输入支行名称" }],
        pay_info_config: {
          id_card: [{ required: true, message: "请上传身份证正面照" }],
          id_card1: [{ required: true, message: "请上传身份证反面照" }],
          license: [{ required: true, message: "请上传营业执照" }],
          pay: [{ required: true, message: "请上传开户许可证" }],
          shop_head: [{ required: true, message: "请上传门店照" }],
          checkstand: [{ required: true, message: "请上传收银台照" }],
          shop: [{ required: true, message: "请上传店内场景照" }]
        }
      },
      id_card: "",
      id_card1: "",
      license: "",
      pay: "",
      shop_head: "",
      checkstand: "",
      shop: "",
      // 地址级联数据
      options: regionData,
      selectedOptions: [],
      // 身份令牌
      myToken: ""
    };
  },
  computed: {
    // 引入权限页面
    ...mapState(["userId"]),
    ...mapState(["payEnable"])
  },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
    },
    // 身份证正面
    handleAvatarSuccess1(res, file) {
      this.id_card = URL.createObjectURL(file.raw);
      this.form.pay_info_config.id_card = res.values;
    },
    // 身份证反面
    handleAvatarSuccess2(res, file) {
      this.id_card1 = URL.createObjectURL(file.raw);
      this.form.pay_info_config.id_card1 = res.values;
    },
    // 营业执照
    handleAvatarSuccess3(res, file) {
      this.license = URL.createObjectURL(file.raw);
      this.form.pay_info_config.license = res.values;
    },
    // 开户许可证
    handleAvatarSuccess4(res, file) {
      this.pay = URL.createObjectURL(file.raw);
      this.form.pay_info_config.pay = res.values;
    },
    // 门头照
    handleAvatarSuccess5(res, file) {
      this.shop_head = URL.createObjectURL(file.raw);
      this.form.pay_info_config.shop_head = res.values;
    },
    // 收银台照
    handleAvatarSuccess6(res, file) {
      this.checkstand = URL.createObjectURL(file.raw);
      this.form.pay_info_config.checkstand = res.values;
    },
    // 店内场景照
    handleAvatarSuccess7(res, file) {
      this.shop = URL.createObjectURL(file.raw);
      this.form.pay_info_config.shop = res.values;
    },
    beforeAvatarUpload(file) {
      // 对上传的图片格式和大小进行限制
      // const isJPG = file.type === "image/jpeg";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      // if (!isLt2M) {
      //   this.$message.error("上传头像图片大小不能超过 2MB!");
      // }
      // return isJPG && isLt2M;
    },
    // 提交表单
    onSubmit(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          // 提交数据
          this.form.distributor_id = this.userId;
          this.form.pay_info_config = JSON.stringify(this.form.pay_info_config);
          this.$api
            .submitPaymentInformation(this.form, this.myToken)
            .then(res => {
              const { succeed, errmsg } = res;
              if (succeed) {
                this.$message({
                  message: "提交成功",
                  type: "success"
                });
                this.$router.replace("/admin/schedule/payApplication");
              } else {
                this.$message.error(errmsg);
              }
            });
        } else {
          return false;
        }
      });
    },
    // 级联选择变化的方法
    handleChange(val) {
      this.form.pay_info_add1 = val[0];
      this.form.pay_info_add2 = val[1];
      this.form.pay_info_add3 = val[2];
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.payment {
  // 地址级联的样式
  .adressOpation {
    width: 95px;
  }
  .detailAdress {
    margin-top: 10px;
  }
  .tip {
    font-size: 14px;
    color: #f00;
    padding: 0 20px 20px;
    li {
      list-style: decimal;
      span {
        color: blue;
      }
    }
  }
}
.payment @{deep} .demo-ruleForm {
  background-color: #fff;
  padding: 30px 30%;
  box-sizing: border-box;
}
// 修改输入框样式
.payment @{deep} .el-input {
  width: 500px;
}
// 表单样式
.payment @{deep} .el-form {
  padding: 30px 25%;
  box-sizing: border-box;
}
// 输入框的宽度
.payment @{deep} .el-input__inner {
  width: 500px;
}
.adressOpation @{deep} .el-input__inner {
  width: 95px;
}
.avatar-uploader {
  .el-upload {
    display: inline-block;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    box-sizing: border-box;
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px dashed #dcdfe6;
    border-radius: 50%;
    &:hover {
      border-color: #409eff;
    }
  }
}
.card {
  display: inline-block;
  margin-right: 35px;
  @{deep} .el-input {
    width: 280px;
  }
  @{deep} .el-input__inner {
    width: 280px;
  }
  .avatar-uploader {
    img {
      width: 180px;
      height: 80px;
    }
    .avatar-uploader-icon {
      border-radius: unset;
      width: 180px;
    }
  }
}
</style>